<!-- 运营-政策 -->
<template>
	<view class="agent-report-layout">
		<uv-navbar title="代理商报表" :titleStyle="{fontSize:'18px'}" :placeholder="true" autoBack>
			<template #right v-if="policyList.length > 0">
				<text style="color: #5F56EF;" @tap="showPolicyReport()">政策报表</text>
			</template>
		</uv-navbar>
		<!-- 金额数据统计 -->
		<view class="st-box">
			<!-- 今日交易 -->
			<view class="tj tj-days-today">
				<text class="tj-title">今日总交易(总)</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{dataInfo.daysTransAmount}}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>笔数</text>
					<text class="tj-count-text">{{dataInfo.daysTransNum}}</text>
					<text>笔</text>
				</view>
				<view class="tj-count-box">
					<text>昨日</text>
					<text class="tj-count-text">{{dataInfo.lastDaysTransAmount}}</text>
					<text>元</text>
					<text class="tj-count-text-2">笔数</text>
					<text class="tj-count-text">{{dataInfo.lastDaysTransNum}}</text>
					<text>笔</text>
				</view>
			</view>
			<uv-gap height="30rpx"></uv-gap>
			<!-- 本月交易 -->
			<view class="tj tj-month">
				<text class="tj-title">本月总交易(总)</text>
				<view class="tj-money-box">
					<text class="tj-money-text">{{dataInfo.monthsTransAmount}}</text>
					<text>元</text>
				</view>
				<view class="tj-count-box">
					<text>笔数</text>
					<text class="tj-count-text">{{dataInfo.monthsTransNum}}</text>
					<text>笔</text>
				</view>
				<view class="tj-count-box">
					<text>上月交易</text>
					<text class="tj-count-text">{{dataInfo.lastMonthsTransAmount}}</text>
					<text>元</text>
					<text class="tj-count-text-2">笔数</text>
					<text class="tj-count-text">{{dataInfo.lastMonthsTransNum}}</text>
					<text>笔</text>
				</view>
			</view>
		</view>
		<!-- 机具数据 -->
		<view>
			<view class="title-box">
				<text>机具数据</text>
			</view>
			<view class="grid-box">
				<view class="device-item" :class="[index == 0 ? 'device-item-0' : '',item.bgClassName]" v-for="(item,index) in deviceList" :key="item.title">
					<text>{{item.title}}</text>
					<view class="device-count">
						<text class="device-count-text">{{item.count}}</text>
						<text>{{item.unit}}</text>
					</view>
					<text>{{item.subTitle}}</text>
					<image class="what-icon" src="/static/operate/what_white.png" mode="aspectFit" v-if="item.isLook" @tap="showRole(item)"></image>
				</view>
			</view>
		</view>
		<!-- 商户数据 -->
		<view>
			<view class="title-box">
				<text>商户数据</text>
			</view>
			<view class="grid-box">
				<view class="device-item" :class="[index == 0 ? 'device-item-0' : '',item.bgClassName]" v-for="(item,index) in merchantList" :key="item.title">
					<text>{{item.title}}</text>
					<view class="device-count">
						<text class="device-count-text">{{item.count}}</text>
						<text>{{item.unit}}</text>
					</view>
					<text>{{item.subTitle}}</text>
					<image class="what-icon" src="/static/operate/what_white.png" mode="aspectFit" v-if="item.isLook" @tap="showRole(item)"></image>
				</view>
			</view>
		</view>
		<view>
			<view class="title-box">
				<text>政策报表</text>
			</view>
			<view class="report-list">
				<view class="report-list-item" v-for="item in policyList" :key="item.policyId" @tap="showPolicyReport(item.policyId)">
					<image src="/static/operate/policy_icon_white.png" mode="aspectFit"></image>
					<view class="report-list-item-content">
						<text>{{item.policyId}}-{{item.policyName}}</text>
						<view class="report-list-item-money">
							<text>{{item.transAmount}}</text>
							<text>元</text>
						</view>
						<text>近30天台均金额</text>
					</view>
					<xh-icon icon="icon_jiantou" color="#fff" style="margin-left: auto;"></xh-icon>
				</view>
				<view class="report-list-empty" v-if="policyList.length == 0">
					<image src="/static/home/empty_icon.png" mode="aspectFit"></image>
					<text>暂无数据~</text>
				</view>
			</view>
		</view>
		<xh-role-pop ref="roleRef"></xh-role-pop>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getPolicyTrade ,getOperateDeviceData,getFilterPolicyList } from '@/common/api/api.js'
	const props = defineProps(['agentId'])
	const roleRef = ref(null)
	// 交易数据
	const dataInfo = ref({
		daysTransNum: 0,
		daysTransAmount: 0,
		lastDaysTransNum: 0,
		lastDaysTransAmount: 0,
		monthsTransNum: 0,
		monthsTransAmount: 0,
		lastMonthsTransNum: 0,
		lastMonthsTransAmount: 0
	})
	const policyList = ref([])
	// 机具统计数据
	const deviceList = ref([{
			title: '机具数',
			unit: '台',
			count: 0,
			subTitle: '直营率0%',
			//是否有查看说明图标
			isLook: true,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-big'
		},
		{
			title: '有效绑定数',
			unit: '台',
			count: 0,
			subTitle: '绑定率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '总激活数',
			unit: '台',
			count: 0,
			subTitle: '直营激活率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		},
		{
			title: '直营绑定数',
			unit: '台',
			count: 0,
			subTitle: '直营绑定率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '直营激活数',
			unit: '台',
			count: 0,
			subTitle: '直营激活率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		},
		{
			title: '今日绑定',
			unit: '台',
			count: 0,
			subTitle: '昨日绑定0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '今日激活',
			unit: '台',
			count: 0,
			subTitle: '昨日激活0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		},
		{
			title: '本月绑定',
			unit: '台',
			count: 0,
			subTitle: '上月绑定0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-blue-small'
		},
		{
			title: '本月激活',
			unit: '台',
			count: 0,
			subTitle: '上月激活0台',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-red-small'
		}
	])
	// 商户统计数据
	const merchantList = ref([{
			title: '商户数',
			unit: '人',
			count: 0,
			subTitle: '本月新增0人',
			//是否有查看说明图标
			isLook: true,
			//背景样式类名
			bgClassName: 'device-item-bg-green-big'
		},
		{
			title: '近30天交易商户数',
			unit: '人',
			count: 0,
			subTitle: '活跃率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-green-small'
		},
		{
			title: '近60天交易商户数',
			unit: '人',
			count: 0,
			subTitle: '活跃率0%',
			//是否有查看说明图标
			isLook: false,
			//背景样式类名
			bgClassName: 'device-item-bg-green-small'
		}
	])
	//查看说明
	const showRole = (item)=>{
		if(item.title == '机具数'){
			roleRef.value.show({title:'直营率说明',content:'评估代理直营的指标数，计算方式为：未划拨机具数/总接收机具数'})
		}
		else if (item.title == '商户数'){
			roleRef.value.show({title:'商户活跃说明',content:'评估代理展业商户健康指数，活跃率计算方式为：近X天内有交易的商户数/总商户数（不包含服务费）'})
		}
		else{
			roleRef.value.show({title:'台均说明',content:'评估代理展业政策健康指数，计算方式为：近30天总交易金额/已绑定机具数（不包含服务费）'})
		}
	}
	// 查看政策报表
	const showPolicyReport = (policyId)=>{
		if(uni.$uv.test.empty(policyId)){
			uni.navigateTo({
				url:'/pages/home/agent-report/policy-report/policy-report'
			})
		}
		else{
			uni.navigateTo({
				url:`/pages/home/agent-report/policy-report/policy-report?policyId=${policyId}`
			})
		}
	}
	
	// 获取交易数据
	const getPolicyTradeInfo = async () => {
		let params = {}
		if(!uni.$uv.test.empty(props.agentId)){
			params.agentId = props.agentId
		}
		const res = await getPolicyTrade(params)
		dataInfo.value = res.result
	}
	// 获取机具数据
	const getPolicyReportInfo = async () => {
		let params = {}
		if(!uni.$uv.test.empty(props.agentId)){
			params.agentId = props.agentId
		}
		const res = await getOperateDeviceData(params)
		const data = res.result
		deviceList.value.forEach(item=>{
			if(item.title == '机具数'){
				item.count = data.deviceAllNum
				item.subTitle = `直营率${data.deviceDirectScale}%`
			}
			else if(item.title == '有效绑定数'){
				item.count = data.deviceBindAllNum
				item.subTitle = `绑定率${data.deviceBindScale}%`
			}
			else if(item.title == '总激活数'){
				item.count = data.deviceAllActiveNum
				item.subTitle = `激活率${data.deviceAcitveScale}%`
			}
			else if(item.title == '直营绑定数'){
				item.count = data.deviceDirectBindNum
				item.subTitle = `直营绑定率${data.deviceDirectBindScale}%`
			}
			else if(item.title == '直营激活数'){
				item.count = data.deviceActiveNum
				item.subTitle = `直营激活率${data.deviceActiveDirectScale}%`
			}
			else if(item.title == '今日绑定'){
				item.count = data.bindTodayNum
				item.subTitle = `昨日绑定${data.bindYesterdayNum}台`
			}
			else if(item.title == '今日激活'){
				item.count = data.activeTodayNum
				item.subTitle = `昨日激活${data.activeYesterdayNum}台`
			}
			else if(item.title == '本月绑定'){
				item.count = data.deviceBindThisMonthNum
				item.subTitle = `上月绑定${data.deviceBindLastMonthNum}台`
			}
			else if(item.title == '本月激活'){
				item.count = data.deviceActiveThisMonthNum
				item.subTitle = `上月激活${data.deviceActiveLastMonthNum}台`
			}
		})
		merchantList.value.forEach(item=>{
			if(item.title == '商户数'){
				item.count = data.merchantAllNum
				item.subTitle = `本月新增${data.merchantThisMonthNum}人`
			}
			else if(item.title == '近30天交易商户数'){
				item.count = data.transMerchantNumNew
				item.subTitle = `活跃率${data.merchantActiveScaleNew}%`
			}
			else if(item.title == '近60天交易商户数'){
				item.count = data.transMerchantNum
				item.subTitle = `活跃率${data.merchantActiveScale}%`
			}
		})
	}
	// 获取政策列表数据
	const getPolicyListData = async ()=>{
		let params = {}
		if(!uni.$uv.test.empty(props.agentId)){
			params.agentId = props.agentId
		}
		const res = await getFilterPolicyList(params)
		policyList.value = res.result
	}
	onLoad(()=>{
		getPolicyTradeInfo()
		getPolicyReportInfo()
		getPolicyListData()
	})
	
</script>

<style lang="scss" scoped>
	.agent-report-layout {
		padding: 30rpx;
		background-color: #fff;
		.what-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 28rpx;
			height: 28rpx;
		}
		.select-policy-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 88rpx;
			color: $xh-color-3;
			font-size: 28rpx;
			border-radius: 16rpx;
			border: 1px solid $xh-line-color;
			margin-bottom: 30rpx;
		}

		.st-box {
			.tj {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: white;
				padding: 30rpx 0;
				font-size: 32rpx;
				position: relative;
				.tj-money-box {
					color: white;
					font-size: 24rpx;
					margin-top: 10rpx;

					.tj-money-text {
						font-size: 50rpx;
						margin-right: 3px;
					}
				}

				.tj-count-box {
					margin-top: 10rpx;
					color: white;
					font-size: 24rpx;

					.tj-count-text {
						font-size: 30rpx;
						margin: 0 10rpx;
					}

					.tj-count-text-2 {
						margin-left: 20rpx;
					}
				}
			}

			.tj-days-30 {
				background-image: url('/static/operate/yy_sy_bg@2x.png');
			}

			.tj-days-today {
				background-image: url('/static/operate/yy_jrjy_bg@2x.png');
			}

			.tj-month {
				background-image: url('/static/operate/yy_byjy_bg@2x.png');
			}
		}

		.title-box {
			padding: 30rpx 0;
			color: $xh-color-3;
			font-size: 28rpx;

		}
		.grid-box {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			.device-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-size: 100% 100%;
				color: #ffffff;
				font-size: 24rpx;
				padding: 16rpx;
				position: relative;
				.device-count {
					display: flex;
					align-items: center;
					color: #ffffff;
					font-size: 24rpx;
					padding: 8rpx 0;
			
					.device-count-text {
						font-size: 32rpx;
					}
				}
			}
			.device-item-0,
			.device-item-9 {
				grid-column-start: 1;
				grid-column-end: 3;
			}
			.device-item-bg-blue-big {
				background-image: url('/static/operate/yy_jjs_bg_1@2x.png');
			}
			.device-item-bg-blue-small{
				background-image: url('/static/operate/yy_jjzbds_bg_2@2x.png');
			}
			.device-item-bg-red-small{
				background-image: url('/static/operate/yy_jjs_bg_2@2x.png');
			}
			.device-item-bg-green-big {
				background-image: url('/static/operate/yy_shs_bg_1@2x.png');
			}
			.device-item-bg-green-small{
				background-image: url('/static/operate/yy_shs_bg_2@2x.png');
			}
		}
		.report-list{
			.report-list-item{
				background: url('/static/operate/yy_byjy_bg@2x.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				margin-bottom: 20rpx;
				image{
					width: 54rpx;
					height: 54rpx;
				}
				.report-list-item-content{
					display: flex;
					flex-direction: column;
					color: #fff;
					margin-left: 10rpx;
					.report-list-item-money{
						color: #fff;
						margin: 10rpx 0;
						text:nth-child(1){
							font-size: 36rpx;
						}
						text:nth-child(2){
							font-size: 20rpx;
							margin-left: 2px;
						}
					}
				}
				.report-list-item-center{
					color: #fff;
				}
			}
			.report-list-empty{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-bottom: 50rpx;
				image{
					width: 360rpx;
					height: 360rpx;
				}
				.empty-text{
					color: #707070;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>